<template>
  <CollapseContainer class="w-full h-32 mt-5 bg-white rounded-md" title="模态消息">
    <!-- Hover-->
    <a-popover class="ml-5" title="Hover" trigger="hover">
      <template #content>
        <p>鼠标滑过显示</p>
        <p>鼠标滑走关闭</p>
      </template>
      <a-button>Hover</a-button>
    </a-popover>

    <!-- Click-->
    <a-popover class="ml-5" title="Click" trigger="click" color="green">
      <template #content>
        <p>鼠标单击展示</p>
        <p>鼠标再单击关闭</p>
      </template>
      <a-button>Click</a-button>
    </a-popover>

    <!-- Focus-->
    <a-popover class="ml-5" title="Focus" trigger="focus">
      <template #content>
        <p>获取焦点时展示</p>
        <p>失去焦点时关闭</p>
      </template>
      <a-input-search placeholder="点我" enter-button="Focus" class="w-50" />
    </a-popover>

    <!-- 左侧边缘对齐-->
    <a-popover class="ml-5" title="Click" trigger="hover" placement="topLeft" arrow-point-at-center>
      <template #content>
        <p>鼠标滑动</p>
        <p>12方位，和 tooltips 类似</p>
      </template>
      <a-button>左侧边缘对齐</a-button>
    </a-popover>

    <!-- 内部关闭-->
    <a-popover class="ml-5" v-model:open="visible" title="Title" trigger="click">
      <template #content>
        <p>点击按钮展示</p>
        <p>再次点击关闭，或通过内部关闭按钮</p>
        <a @click="hide">内部关闭弹窗</a>
      </template>
      <a-button type="primary">内部关闭</a-button>
    </a-popover>

    <div class="w-full bg-white rounded-md">
      <ol class="ml-5 mt-5 pb-3">
        <li class="mt-2">antd 原生方式,和 toolTips 类似 </li>
        <li class="mt-2">比 toolTips 展示更多元素 </li>
        <li class="mt-2">
          <a href="https://www.antdv.com/components/tooltip-cn">ant message 官方文档</a>
        </li>
      </ol>
    </div>

    <CollapseContainer class="w-full bg-white rounded-md mt-5" title="源码">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>
  </CollapseContainer>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';

  // 导入 Popover
  import {
    Popover as aPopover,
    Button as aButton,
    InputSearch as aInputSearch,
  } from 'ant-design-vue';

  // 内部关闭时，条件控制
  let visible = ref<boolean>(false);

  // 内部关闭方法
  function hide() {
    visible.value = false;
  }
</script>

<script lang="ts">
  function getDoc() {
    return `

\`\`\`html
<!-- Hover-->
    <a-popover class="ml-5" title="Hover" trigger="hover">
      <template #content>
        <p>鼠标滑过显示</p>
        <p>鼠标滑走关闭</p>
      </template>
      <a-button>Hover</a-button>
    </a-popover>

    <!-- Click-->
    <a-popover class="ml-5" title="Click" trigger="click" color="green">
      <template #content>
        <p>鼠标单击展示</p>
        <p>鼠标再单击关闭</p>
      </template>
      <a-button>Click</a-button>
    </a-popover>

    <!-- Focus-->
    <a-popover class="ml-5" title="Focus" trigger="focus">
      <template #content>
        <p>获取焦点时展示</p>
        <p>失去焦点时关闭</p>
      </template>
      <a-input-search placeholder="点我" enter-button="Focus" class="w-50" />
    </a-popover>

    <!-- 左侧边缘对齐-->
    <a-popover class="ml-5" title="Click" trigger="hover" placement="topLeft" arrow-point-at-center>
      <template #content>
        <p>鼠标滑动</p>
        <p>12方位，和 tooltips 类似</p>
      </template>
      <a-button>左侧边缘对齐</a-button>
    </a-popover>

    <!-- 内部关闭-->
    <a-popover class="ml-5" v-model:open="visible" title="Title" trigger="click">
      <template #content>
        <p>点击按钮展示</p>
        <p>再次点击关闭，或通过内部关闭按钮</p>
        <a @click="hide">内部关闭弹窗</a>
      </template>
      <a-button type="primary">内部关闭</a-button>
    </a-popover>
\`\`\`

\`\`\`typescript
// 导入 Popover
import {
  Popover as aPopover,
  Button as aButton,
  InputSearch as aInputSearch,
} from 'ant-design-vue';

// 内部关闭时，条件控制
let visible = ref<boolean>(false);

// 内部关闭方法
function hide() {
  visible.value = false;
}
\`\`\`

`;
  }
</script>
